<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频上传编辑</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <link rel="icon" href="images/Favicon.png">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/fontello.css">
    <link rel="stylesheet" type="text/css" href="css/fontello-codes.css">
    <link rel="stylesheet" type="text/css" href="css/thumbs-embedded.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <link rel="stylesheet" type="text/css" href="css/color.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1805932_ysrcp4y0uy9.css">
    <link rel="stylesheet" href="css/uploadImg.css">
</head>
<body>

<div class="wrapper">


    <div id="app">
        <my-header></my-header>
    </div>
    <!--upload-detail end-->


    <section class="vid-title-sec">
        <div class="container">
            <form>
                <div class="vid-title">
                    <h2 class="title-hd">Video Title </h2>
                    <div class="form_field">
                        <input type="text" placeholder="Add here (99 characters remaining)">
                    </div>
                </div><!--vid-title-->
                <div class="abt-vidz-pr">
                    <h2 class="title-hd"> About </h2>
                    <div class="form_field">
                        <textarea placeholder="Description"></textarea>
                    </div>
                </div><!--abt-vidz-->


                <div class="category">
                    <h2 class="title-hd">Category (select upto 6 categories)</h2>
                    <div class="category-typ">
                        <ul class="catgss_list">
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="abaft" value="ab">
                                        <b class="checkmark"></b>
                                        <span>Abaft</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Brick" value="ab">
                                        <b class="checkmark"></b>
                                        <span>Brick</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Purpose" value="ab">
                                        <b class="checkmark"></b>
                                        <span>Purpose</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Shallow" value="ab">
                                        <b class="checkmark"></b>
                                        <span>Shallow</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Spray" value="brick">
                                        <b class="checkmark"></b>
                                        <span>Spray</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Seashore" value="brick">
                                        <b class="checkmark"></b>
                                        <span>Seashore</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Orange" value="brick">
                                        <b class="checkmark"></b>
                                        <span>Orange</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Dynamic" value="brick">
                                        <b class="checkmark"></b>
                                        <span>Dynamic</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Planes" value="purpose">
                                        <b class="checkmark"></b>
                                        <span>Planes</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Comfortable" value="purpose">
                                        <b class="checkmark"></b>
                                        <span>Comfortable</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Leg" value="purpose">
                                        <b class="checkmark"></b>
                                        <span>Leg</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Fall" value="purpose">
                                        <b class="checkmark"></b>
                                        <span>Fall</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Pin" value="shallow">
                                        <b class="checkmark"></b>
                                        <span>Pin</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Trouble" value="shallow">
                                        <b class="checkmark"></b>
                                        <span>Trouble</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Cemetery" value="shallow">
                                        <b class="checkmark"></b>
                                        <span>Cemetery</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Sort" value="shallow">
                                        <b class="checkmark"></b>
                                        <span>Sort</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Respect" value="spray">
                                        <b class="checkmark"></b>
                                        <span>Respect</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Rice" value="spray">
                                        <b class="checkmark"></b>
                                        <span>Rice</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Disagreeable" value="spray">
                                        <b class="checkmark"></b>
                                        <span>Disagreeable</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Minister" value="spray">
                                        <b class="checkmark"></b>
                                        <span>Minister</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Quiet" value="seashore">
                                        <b class="checkmark"></b>
                                        <span>Quiet</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Rescue" value="seashore">
                                        <b class="checkmark"></b>
                                        <span>Rescue</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Agonizing" value="seashore">
                                        <b class="checkmark"></b>
                                        <span>Agonizing</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Stitch" value="seashore">
                                        <b class="checkmark"></b>
                                        <span>Stitch</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Scissors" value="orange">
                                        <b class="checkmark"></b>
                                        <span>Scissors</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Spiffy" value="orange">
                                        <b class="checkmark"></b>
                                        <span>Spiffy</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Tin" value="orange">
                                        <b class="checkmark"></b>
                                        <span>Tin</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Rambunctious" value="orange">
                                        <b class="checkmark"></b>
                                        <span>Rambunctious</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Sordid" value="dynamic">
                                        <b class="checkmark"></b>
                                        <span>Sordid</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Wise" value="dynamic">
                                        <b class="checkmark"></b>
                                        <span>Wise</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Boy" value="dynamic">
                                        <b class="checkmark"></b>
                                        <span>Boy</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Fold" value="dynamic">
                                        <b class="checkmark"></b>
                                        <span>Fold</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Moan" value="planes">
                                        <b class="checkmark"></b>
                                        <span>Moan</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Overjoyed" value="planes">
                                        <b class="checkmark"></b>
                                        <span>Overjoyed</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Obsequious" value="planes">
                                        <b class="checkmark"></b>
                                        <span>Obsequious</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Heat" value="planes">
                                        <b class="checkmark"></b>
                                        <span>Heat</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Incompetent" value="comfortable">
                                        <b class="checkmark"></b>
                                        <span>Incompetent</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Grin" value="comfortable">
                                        <b class="checkmark"></b>
                                        <span>Grin</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Fat" value="comfortable">
                                        <b class="checkmark"></b>
                                        <span>Fat</span>
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div class="chekbox-lg">
                                    <label>
                                        <input type="checkbox" name="Gate" value="comfortable">
                                        <b class="checkmark"></b>
                                        <span>Gate</span>
                                    </label>
                                </div>
                            </li>
                        </ul>
                        <div class="clearfix"></div>

                    </div><!--category-typ-->
                </div><!--Category-->
            </form>
        </div>
    </section><!--vid-title-sec-->
    <div class="upload-content">
        <h3>上传图片</h3>
        <div class="content-img">
            <ul class="content-img-list"></ul>
            <div class="file">
                <i class="gcl gcladd"></i>
                <input type="file" name="file" accept="image/*" id="upload" multiple>
            </div>
        </div>
        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                </div>
            </div>
        </div>

    </div>
    <div class="btn-sbmit">
        <button type="submit">Save</button>
    </div><!--btn-sbmit end-->
    <div class="upload-detail" id="uploadFile" style="display: flex;justify-content: center;align-items: center">
        <form
                id="myForm"
                enctype="multipart/form-data"
                name="fileinfo"
                action=""
                target="uploadFrame"

        >
            <div class="img-file">
                <label for="imgFile" class="addbutton button-green"
                >选择视频</label
                >
                <input
                        @change="changeVideo"
                        id="imgFile"
                        class="upload_input"
                        type="file"
                        accept="video/*"
                />
            </div>
        </form>
    </div>
    <section class="suggestions">
        <div class="container">
            <div class="sgst_content">
                <h3>Help & Suggestions</h3>
                <p>By submitting your videos to ProjectFitnessTV, you acknowledge that you agree to ProjectFitnessTV’s<a
                        href="#" title=""> Terms of Service</a>and<a href="#" title="">Community Guidelines</a>. Please
                    be sure not to violate others’ copyright or privacy rights.<a href="#"> Learn more</a></p>
            </div>
        </div>
    </section><!--Suggestions end-->


    <div class="abt-vidz">
        <ul>
            <li>
                <a href="#">Upload Instructions </a>
            </li>
            <li>
                <a href="#">Troubleshooting </a>
            </li>
            <li>
                <a href="#">Mobile Upload </a>
            </li>
        </ul>
    </div><!--abt-vidz-->


    <footer>
        <div class="container">
            <div class="top-footer">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ft-logo">
                            <img src="images/ft-logo.png" alt="">
                        </div><!--ft-logo end-->
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 col-12">
                        <div class="widget">
                            <h3 class="widget-title">pages</h3>
                            <ul class="pages-link">
                                <li><a href="#" title="">About</a></li>
                                <li><a href="#" title="">Community Rules</a></li>
                                <li><a href="#" title="">Privacy</a></li>
                                <li><a href="#" title="">Terms</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 col-12">
                        <div class="widget">
                            <h3 class="widget-title">Links</h3>
                            <ul class="pages-link">
                                <li><a href="#" title="">Blog</a></li>
                                <li><a href="#" title="">Contact</a></li>
                                <li><a href="#" title="">Donate</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6 col-12">
                        <div class="widget">
                            <h3 class="widget-title">support</h3>
                            <ul class="pages-link">
                                <li><a href="#" title="">Support</a></li>
                                <li><a href="#" title="">FAQ</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12 col-sm-6 col-12">
                        <div class="widget widget-information">
                            <h3 class="widget-title">Information</h3>
                            <p>Oren is a video sharing platform created for the discovery & promotion of content
                                creators. It's home to breaking news in social media, & urban cultural
                                entertainment.</p>
                        </div><!--widget-information end-->
                    </div>
                </div>
            </div><!--top-footer end-->
            <div class="bottom-strip">
                <p>© azyrusthemes <i class="icon-like"></i> Made in India</p>
                <ul class="social-links">
                    <li><a href="#" title=""><i class="icon-facebook-official"></i></a></li>
                    <li><a href="#" title=""><i class="icon-twitter"></i></a></li>
                    <li><a href="#" title=""><i class="icon-instagram"></i></a></li>
                </ul>
                <div class="clearfix"></div>
            </div><!--bottom-strip end-->
        </div>
    </footer><!--footer end-->


</div><!--wrapper end-->


<script src="js/jquery.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/header.js"></script>
<script src="js/uploadImg.js"></script>
<script>
    var app = new Vue({
        el: '#app',
    })
    new Vue({
        el: "#uploadFile",
        data() {
            return {}
        },
        created() {

        },
        methods: {
            changeVideo() {
                let that = this;
                var file = document.getElementById("imgFile").files[0];
                that.file = file;
                var ids = this.ids;
                var formData = new FormData();
//构造一个 FormData，把后台需要发送的参数添加到FormData里面，这样就可以直接把formData作为参数传递了
                if (file) {
                    console.log(true)
                    formData.append("file", file); //接口需要传递的参数
                }
                let potss = formData;
                let urls = "http://192.168.21.27:9008/file/upload";
                axios
                    .post(urls, potss)
                    .then(function (res) {
                        console.log(res)
                        /*     that.prames.videoUrl = res.data.info;
                             that.videoshow = false;*/
                    })
                    .catch(function (err) {
                        console.log(err);
                    });
            }
        }

    })
</script>

</body>
</html>
